<template>
  <li class="item-li">
    <div class="v m300">
      <!-- 上部分 -->
      <a
        class="preview cover-preview"
        :href="hreflink"
        target="_blank"
      >
        <!-- item 左上角的奖牌 -->
        <div
          v-show="false"
          class="medal"
        />
        <div class="original" />
        <!-- 边框 -->
        <div class="border" />
        <!-- 背景图片 -->
        <img v-lazy="item.pic">
        <!-- 内容预览 -->
        <div class="back">
          <div />
        </div>
        <!-- 预览进度控制 -->
        <div class="fore">
          <span data-loading="false" />
          <div class="bar">
            <div />
          </div>
        </div>
        <!-- 视频时间 -->
        <div class="x">
          <b class="x2">{{ item.duration }}</b>
        </div>
      </a>
      <!-- 下部分 -->
      <a
        :href="hreflink"
        :title="item.title"
        target="_blank"
      >
        <div class="t">{{ item.title }}</div>
        <div class="i">
          <span>
            <i class="b-icon b-icon-v-play" />{{ item.stat.view }}
          </span><span>
            <i class="b-icon b-icon-v-dm" />
            {{ item.stat.reply }}
          </span>
        </div>
      </a>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    item: {
      type: Object
    }
  },
  computed: {
    hreflink () {
      return 'http://www.bilibili.com/video/av' + this.item.aid
    }
  }
}
</script>

<style lang="stylus" scoped>
.item-li
  float left
  margin 0 20px 20px 0
  .v
    position relative
    width 160px
    height 148px
    font-size 12px
    overflow hidden
    transition all .3s linear
    .x
      visibility hidden
      opacity 0
    .cover-preview
      position relative
      .back
        position absolute
        top 0px
        left 0px
        width 100%
        height 100%
        opacity 0
        z-index 0
      .fore
        position absolute
        top 0px
        left 0px
        width 100%
        height 100%
        opacity 0
        z-index 0
        transition opacity .2s
        background-color rgba(0,0,0,0.2)
        .bar
          margin 5px
          height 2px
          background-color rgba(255,255,255,0.4)
          border-radius 1px
          opacity 0
          transition opacity .2s .3s
          div
            height 2px
            border-radius 1px
      .x
        position absolute
        z-index 4
        top 0px
        left 0px
        bottom 0px
        right 0px
        line-height 20px
        width 100%
        height 100%
        background rgba(0,0,0,0.2)
        overflow hidden
        transition .2s
        border-top-left-radius 4px
        .x2
          position absolute
          right 0
          bottom 0px
          margin 0 5px 0 5px
          font-weight normal
          font-family tahoma,arial,'宋体',sans-serif
          color #fff
      .medal
        opacity 1
        transition opacity .2s
      &:hover
        .medal
          opacity 0
        .fore
          opacity 1
          .bar
            opacity 1
    .preview
      width 160px
      height 100px
      display block
      overflow hidden
      text-align center
      transition .2s all linear
      box-sizing border-box
      z-index 0
      border-radius 4px
      -webkit-mask-image -webkit-radial-gradient(circle, white, black)
      .medal
        position absolute
        left 0
        top 0px
        width 40px
        height 24px
        background url(../../assets/images/icons.png) no-repeat
        z-index 5
        pointer-events none
        background-position -849px -148px
        transition opacity .2x
        opacity 1
      img
        width 100%
        height 100%
        display block
        margin 0 auto
        outline 0
    .t
      margin-bottom 8px
      padding-top 8px
      height 20px
      line-height 20px
      transition all .2s linear
      color #222
      word-wrap break-word
      word-break break-all
      overflow hidden
      text-align left
    .i
      margin 0
      font-size 12px
      line-height 12px
      span
        display inline-block
        vertical-align top
        color #99a2aa
        width 80px
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
        line-height 12px
        height 14px
        .b-icon
          display inline-block
          width 12px
          height 12px
          vertical-align middle
          background url(../../assets/images/icons.png) no-repeat
          vertical-align top
          margin-right 5px
          &.b-icon-v-play
            background-position -282px -90px
          &.b-icon-v-dm
            background-position -282px -218px
    &:hover
      .t
        height 40px
        color #00a1d6
      .x
        opacity 1
        visibility visible

</style>
